<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" >
          <div style="text-align: center">这个商品很贵的</div>
          <div style="color: red;margin-top: 10px">价格 $99.00</div>
        </div>
      </el-col><el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" >
          <div style="text-align: center">这个商品很贵的</div>
          <div style="color: red;margin-top: 10px">价格 $99.00</div>
        </div>
      </el-col><el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" >
          <div style="text-align: center">这个商品很贵的</div>
          <div style="color: red;margin-top: 10px">价格 $99.00</div>
        </div>
      </el-col><el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
          <img style="width: 80%" src="@/assets/logo.png" >
          <div style="text-align: center">这个商品很贵的</div>
          <div style="color: red;margin-top: 10px">价格 $99.00</div>
        </div>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <div style="margin-top: 30px;margin-left: 40px">
          <el-button type="primary">主要按钮</el-button>
          <el-button type="danger">危险按钮</el-button>
          <el-button type="warning">警告按钮</el-button>
          <el-button type="info">信息按钮</el-button>
          <el-button type="success">成功按钮</el-button>
          <el-button>默认的按钮</el-button>
          <el-button type="primary" plain>朴素按钮</el-button>
          <el-button circle icon="el-icon-edit" type="primary" plain></el-button>
          <el-button circle icon="el-icon-delete" type="danger" plain></el-button>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 30px;margin-left: 40px;">
      <el-col>
        <el-input style="width: 200px;" placeholder="请输入账号" v-model="value1"></el-input>
        <el-input style="margin-left: 10px; width: 200px;" placeholder="请输入密码" show-password v-model="value2"></el-input>
        <el-input style="margin-left: 10px;width: 200px;" placeholder="请输入搜索内容" prefix-icon="el-icon-search"  v-model="value3"></el-input>
        <el-input style="margin-left: 10px;width: 200px;" placeholder="请输入日期" suffix-icon="el-icon-date"  v-model="value3"></el-input>

        <!--下拉框-->
            <el-select style="margin-left: 50px" v-model="select2" v-on:change="changeSelct" filterable multiple>
              <el-option v-for="item in fruits" :key="item.card" :label="item.name" :value="item.card"></el-option>
            </el-select>

      </el-col>
    </el-row>

    <el-row>
      <el-col>
      <el-autocomplete style="width: 200px;margin-top: 20px;margin-left: 40px" placeholder="请输入内容，我来帮你猜一猜"
          :fetch-suggestions="querySearch" :trigger-on-focus="false" v-model="value5"></el-autocomplete>

<!--        时间日期-->
        <el-date-picker value-format = "yyyy-MM-dd" style="margin-left: 10px;width: 200px;" v-model="date" type="date"></el-date-picker>
        <el-date-picker value-format = "yyyy-MM-dd HH:mm:ss" style="margin-left: 10px;width: 200px;" v-model="datetime" type="datetime" placeholder="选择时间日期"></el-date-picker>
        <el-date-picker value-format = "yyyy-MM-dd" style="margin-left: 10px;" v-model="date" type="daterange"></el-date-picker>

      </el-col>
    </el-row>

    <el-radio-group style="margin-top: 20px;margin-left: 40px" v-model="radios">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>

    <el-checkbox-group style="margin-top: 20px;margin-left: 40px" v-model="checkboxs">  // 绑定的数据必须是数组形式
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
    </el-checkbox-group>


  </div>
</template>

<script>
export default {
  data(){
    return{
      value1:'',
      value2:'',
      value3:'',
      value4:'',
      value5:'',
      radios:'',
      date:'',
      datetime:'',
      checkboxs:[],
      select:[{name:'香蕉',id:1},{name:'橘子',id:2},{name:'雪梨',id:3}],
      select2:[],
      fruits:[
        {name:'张三',card:123455556},
        {name:'李四',card:235667767},
        {name:'王五',card:235633279}
      ],
      coffees:[{value:'1.星巴克咖啡'},{value:'2.瑞幸咖啡'},{value:'3.雀巢咖啡'},{value:'4.库迪咖啡'}]
    }
  },
  methods:{
    changeSelct(){
      console.log(this.select2)
    },
    querySearch(query,cb){
      console.log(this.coffees)
      let result = query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
      console.log(result.length)
      cb(result)
    }
  }

}
</script>
